<template>

    <div class="telephone_close_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>候场音乐</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="telephone_close_card">

            <!-- title -->
            <el-row class="title font18">
                <el-col>候场音乐</el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="telephone_close_content">

                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="telephone_close_form" label-width="100px">
                    <el-form-item label="标题:" prop="name">
                        <el-input class="width380" v-model="ruleForm.name" placeholder="请输入轮播图的名称"></el-input>
                    </el-form-item>
                    <el-form-item label="图片:">
                        <el-upload action="http://up-z2.qiniup.com" :limit="1" :file-list="imgList"
                                   list-type="picture-card" :on-preview="descPictureCardPreview" :on-remove="descRemove"
                                   :on-success="descAvatarSuccess" :on-error="descError" :on-exceed="descExceed"
                                   :data="postData">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <!--<p class="disc">图片尺寸750 X 900</p>-->
                        <el-dialog :visible.sync="desc_img">
                            <img width="100%" :src="descImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="候场音乐:" prop="audio">
                        <el-upload
                                style="width: 400px;"
                                class="upload-demo"
                                action="http://up-z2.qiniup.com"
                                :on-preview="preview_video"
                                :on-remove="remove_audio"
                                :before-upload='beforeUpload'
                                :before-remove="before_remove_video"
                                :on-success="upload_video_success"
                                :limit="1"
                                :show-file-list="false"
                                :on-exceed="handle_exceed_video" :data="postData" v-if="is_upload_video === false">
                            <el-button size="small" type="primary" v-loading.fullscreen.lock="fullscreenLoading"
                                       element-loading-text="上传中,请稍候">点击上传
                            </el-button>
                        </el-upload>
                        <el-button size="small" type="primary" @click="remove_audio" v-if="is_upload_video">移除音频
                        </el-button>
                        <div style="padding-top: 10px;" v-if="is_upload_video">
                            <el-row>
                                <el-col :span="0.5">
                                    <el-popover placement="top-start" trigger="hover">
                                        <div style="text-align: center">
                                            <el-progress color="#67C23A" type="circle" :percentage="music.volume"></el-progress>
                                            <br>
                                            <el-button @click="changeVolume(-10)" icon="el-icon-minus" circle></el-button>
                                            <el-button @click="changeVolume(10)" icon="el-icon-plus" circle></el-button></div>
                                        <el-button @click="play" id="play" slot="reference" :icon="music.isPlay?'el-icon-loading':'el-icon-caret-right'" circle></el-button>
                                    </el-popover>
                                </el-col>
                                <el-col :span="2" style="padding-left: 15px;">
                                    <el-slider @change="changeTime" :format-tooltip="formatTime" :max="music.maxTime" v-model="music.currentTime" style="width: 100%;"></el-slider>
                                </el-col>
                                <el-col :span="6" style="padding: 0px 0px 0px 10px;color:#909399;font-size: 13px">
                                    {{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}
                                </el-col>
                            </el-row>
                            <audio ref="music" loop autoplay>
                                <source :src="ruleForm.audio" type="audio/mpeg">
                            </audio>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

</template>

<script src='../../../static/js/telephone/music.js'></script>

<style scoped>
    @import "../../../static/css/telephone/music.css";
</style>


